<template>
  <div class="card">
    <div class="card-block">
      <p class="card-text"> {{ comment.body }} </p>
    </div>
    <div class="card-footer">
      <nuxt-link class="comment-author"
                 :to="{
                   name: 'profile',
                   params: {
                     username: comment.author.username
                   }
                 }">
        <img :src="comment.author.image"
             class="comment-author-img" />
      </nuxt-link>
      &nbsp;
      <nuxt-link class="comment-author"
                 :to="{
                   name: 'profile',
                   params: {
                     username: comment.author.username
                   }
                 }">
        {{ comment.author.username }}
      </nuxt-link>
      <span class="date-posted">
        {{ comment.createdAt | dateFormat('MMM DD, YYYY') }}
      </span>
      <span class="mod-options"
            v-if="user.username === comment.author.username"
            @click="deleteComment(comment)">
        <i class="ion-trash-a"></i>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CommentCard',
  props: {
    comment: {
      type: Object,
      required: true
    },
    user: {
      type: Object
    }
  },
  methods: {
    deleteComment(comment) {
      this.$emit('deleteComment', comment)
    }
  }
}
</script>

<style>
</style>